前半部分兩個頁面整體完成了，接著幾天想加上一些視覺和互動效果。

使用者在介紹頁的時候因為內容較多，畫面是可以捲動的，這裡希望可以將目錄固定在畫面右上角，不受頁面滾動影響。

這裡會用到position屬性裡的fixed。

.menu{
  position: fixed;
  z-index: 2;
  right: 0;
}

fixed會相對視窗來定位，把目錄的position設為fixed後固定到右邊，z-index設為2，避免被介紹頁覆蓋。

測試一下，發現設定失效了，目錄還是會隨著畫面一起被捲動，找了一下原因，發現是因為body裡設定了filter屬性，其他原因可以參考 MDN-position#fixed。

要移除body的filter屬性，但又想保留背景模糊效果，那是不是可以加入一個空元素用來放body的filter屬性？

<div class="background"></div>

讓空元素覆蓋整個畫面後加上原本body裡的filter屬性。

.background{
  position: absolute;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(2.5px);
}

參考資料/延伸閱讀

1. learnlayout
2. juejin.cn